<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--
v-bind:title="msg"
:title="msg"
v-on:click="myMethod"
@click="myMethod"
-->

<div id="app" :title="msg">
  <div v-if="!seen" @click="myMethod">{{ msg }}</div>
  <hr>
  <div v-for="item in 'hello'">{{ item }}</div>
  <ul>
    <li v-for="item in products" :data-id="item.id">
      {{ item.title }}
    </li>
  </ul>
  <h1>{{ content }}</h1>
  <input type="text" v-model="content">
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      content: 'my content',
      msg: 'hello vue!!!'.toUpperCase(),
      seen: false,
      products: [
        {
          id: '123asda',
          title: '手机'
        },
        {
          id: '12sdfda',
          title: '口红'
        },
        {
          id: '12456da',
          title: '法拉利'
        },
      ]
    },
    methods: {
      myMethod() {
        this.msg = this.msg.split('').reverse().join('')
      },
    }
  })

</script>

<!--
数据驱动
-->

</body>
</html>
